<template>
	<!-- 订单中心 -->
	<view class="wp">
		<nav-public :title="'我的订单'" :background="'#4B05A7'" :color="'white'"></nav-public>
		<view class="nav_bar">
			<view class="bg">
				<!-- <uni-search-bar class="nav_search" v-model="keyword" radius="100" placeholder="搜索你想要的商品" clearButton="none" cancelButton="none" @confirm="search"/> -->
				<view class="bar1">
					<view class="cate" :class="{'active':barIdx1===0}" @click="changeType(0,3)">门店订单<view class="round" v-if="Zwatenum>0"></view></view>
					<!-- <view class="cate" :class="{'active':barIdx1===2}" @click="changeType(2,3)">团购订单<view class="round" v-if="Wwatenum>0"></view></view> -->
					<!-- <view class="cate" :class="{'active':barIdx1===1}" @click="changeType(1,3)">商城订单</view> -->
					<!-- <view class="cate" :class="{'active':barIdx1===3}" @click="changeType(3,3)">三方订单</view> -->
					<view class="cate" :class="{'active':barIdx1===4}" @click="changeType(4,3)">积分明细</view>
				</view>
				<view class="select_time" v-if="barIdx1===0">
					<view class="time">
					<!-- <view class="time" @click="openDatetimePicker"> -->
						<view class="yticon yTr" @click.stop="lastMonth">
							<text class="icon-you"></text>
						</view>
						<text class="time_num">{{timeV}}</text>
						<view class="yticon" @click.stop="nextMonth">
							<text class="icon-you"></text>
						</view>
					</view>
					<text class="money">本月实付：{{xianMoney}}</text>
				</view>
			</view>
			<view class="bar2" v-if="barIdx1===0">
				<view class="cate" :class="{'active':typeIdx0===0}" @click="changeType(0,0)">全部</view>
				<view class="cate" :class="{'active':typeIdx0===1}" @click="changeType(1,0)">待消费<view class="round" v-if="Zwatenum>0"></view></view>
				<view class="cate" :class="{'active':typeIdx0===3}" @click="changeType(3,0)">已消费</view>
				<view class="cate" :class="{'active':typeIdx0===4}" @click="changeType(4,0)">待评价</view>
			</view>
			<view class="bar2 barDuo" v-if="barIdx1===1">
				<view class="cate" :class="{'active':typeIdx===''}" @click="changeType('',1)">全部</view>
				<!-- <text :class="{'active':typeIdx===0}" @click="changeType(0,1)">待付款</text> -->
				<view class="cate" :class="{'active':typeIdx===1}" @click="changeType(1,1)">待发货</view>
				<view class="cate" :class="{'active':typeIdx===2}" @click="changeType(2,1)">待收货</view>
				<view class="cate" :class="{'active':typeIdx===3}" @click="changeType(3,1)">已完成</view>
				<view class="cate" :class="{'active':typeIdx===4}" @click="changeType(4,1)">退款/售后</view>
			</view>
			<!-- <view class="serch" v-if="barIdx1===1">
				<view @click="$navTo('../order/ordersearch')">
					<image src="../../static/ss.png" mode=""></image>
					<text>搜索订单</text>
				</view>
			</view> -->
			<view class="bar2 barDuo" v-if="barIdx1===2">
				<view class="cate" :class="{'active':typeIdx2===-1}" @click="changeType(-1,2)">全部</view>
				<view class="cate" :class="{'active':typeIdx2===0}" @click="changeType(0,2)">未支付</view>
				<view class="cate" :class="{'active':typeIdx2===1}" @click="changeType(1,2)">未核销<view class="round" v-if="Wwatenum>0"></view></view>
				<view class="cate" :class="{'active':typeIdx2===3}" @click="changeType(3,2)">已核销</view>
				<view class="cate" :class="{'active':typeIdx2===4}" @click="changeType(4,2)">退款/售后</view>
			</view>
			<view class="bar2" v-if="barIdx1===3">
				<view class="cate" :class="{'active':typeIdx3===1}" @click="changeType(1,4)">已付款</view>
				<view class="cate" :class="{'active':typeIdx3===2}" @click="changeType(2,4)">退款/售后</view>
			</view>
			<view class="flex_align_center search_con" v-if="barIdx1===4">
				<uni-search-bar radius="30" v-model="keywordLineup" placeholder="请输入订单号/店铺名/商品名" clearButton="auto" cancelButton="none" @confirm="searchLineup" @clear="searchLineup('')"/>
				<view class="filter flex_align_center" @click="openfilter">筛选<image src="https://img.jinghushi.com/images/9/2024/11/ENwwv0q5Kyv5qZyk5xiY5rWwllY20n.png"></image></view>
			</view>
			<view class="bar2" v-if="barIdx1===4">
				<view class="cate" :class="{'active':typeIdx4===-1}" @click="changeType(-1,5)">全部<block v-if="lineUpTotal.acut">({{lineUpTotal.acut}})</block></view>
				<!-- <view class="cate" :class="{'active':typeIdx4===2}" @click="changeType(2,5)">排队中-最近</view> -->
				<view class="cate" :class="{'active':typeIdx4===1}" @click="changeType(1,5)">补贴中<block v-if="lineUpTotal.ycut">({{lineUpTotal.ycut}})</block></view>
				<view class="cate" :class="{'active':typeIdx4===0}" @click="changeType(0,5)">已完成<block v-if="lineUpTotal.ocut">({{lineUpTotal.ocut}})</block></view>
			</view>
			<view class="bar3 flex_align_center" v-if="barIdx1==4">
				<view class="line_total">已补贴米券：<text class="pub_red">{{(lineUpTotal.sendmoney).toFixed(2)}}</text></view>
				<view class="line_total">待补贴米券：<text class="pub_red">{{(lineUpTotal.waitmoney).toFixed(2)}}</text></view>
			</view>
		</view>
		<view class="body" :class="{'setTop1':barIdx1===0,'setTop2':barIdx1==4}">
			<zi-order v-if="barIdx1===0" :list.sync="list" :isloading="isloading" :ismore="ismore"></zi-order>
			<my-order v-if="barIdx1===1" :list.sync="list" :giftData.sync="giftData" :isloading="isloading" :ismore="ismore"></my-order>
			<write-off v-if="barIdx1===2" :barIdx1="barIdx1" :typeIdx2="typeIdx2" :list.sync="list" :isloading="isloading" :ismore="ismore"></write-off>
			<three-order v-if="barIdx1===3" :list.sync="list" :isloading="isloading" :ismore="ismore"></three-order>
			<line-up-order v-if="barIdx1===4" :list.sync="list" :isloading="isloading" :ismore="ismore"></line-up-order>
		</view>
		<simple-datetime-picker ref="myPicker" :startYear="2023" :endYear="endYear" @submit="handleSubmit"></simple-datetime-picker>
		<uni-popup ref="filter_popup" background-color="#fff" type="bottom">
			<view class="filter_con">
				<view class="fil_tit">日期选择：</view>
				<uni-datetime-picker v-model="beginlineup" type="daterange" @change="changeTime($event)"/>
				<!-- <view class="fil_tit">订单类型：</view> -->
				<!-- <view class="flex_between">
					<view class="fil_it" :class="{'fil_it_ac':typelineup==1}" @click="changeTypeline(1)">商城订单</view>
					<view class="fil_it" :class="{'fil_it_ac':typelineup==2}" @click="changeTypeline(2)">门店订单</view>
					<view class="fil_it" :class="{'fil_it_ac':typelineup==3}" @click="changeTypeline(3)">团购订单</view>
				</view> -->
				<view class="flex_between">
					<view class="fil_btn fil_reset" @click="sure('reset')">重置</view>
					<view class="fil_btn fil_sure" @click="sure('sure')">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import ziOrder from './components/zi-order.vue'//线下买单
	import myOrder from './components/myorder.vue';//商城订单
	import writeOff from './components/write-off.vue';//团购订单
	import threeOrder from './components/three-order.vue';//三方订单
	import lineUpOrder from './components/lineUpOrder.vue';//排队明细
	import SimpleDateTimePicker from '@/components/simple-datetime-picker/simple-datetime-picker.vue'
	export default {
		components: {
			ziOrder,
			myOrder,
			writeOff,
			threeOrder,
			lineUpOrder,
			SimpleDateTimePicker
		},
		data() {
			let date = new Date(),
				year = date.getFullYear(),
				month = date.getMonth() + 1,
				timeV = year + '-' + month,
				timeVstr = year + '年' + month + '月';
			return {
				barIdx1: 0,
				endYear: year,
				timeV,
				timeVstr,
				typeIdx: '',
				typeIdx2: -1,
				typeIdx0: 0,
				typeIdx3: 1,
				typeIdx4: -1,
				xianMoney: '',
				isloading: false,
				ismore: true,
				page: 0,
				list: [],
				Zwatenum: 0,//优惠买单未消费
				Wwatenum: 0,//团购订单未核销
				keyword: "",
				giftData: {},
				keywordLineup: '',
				beginlineup: '',
				endlineup: '',
				typelineup: 2,
				lineUpTotal: []
			}
		},
		onLoad() {
			this.barIdx1=uni.getStorageSync('upOrderType')?uni.getStorageSync('upOrderType'):this.barIdx1;
			if(uni.getStorageSync('upOrderType')==0){
				this.barIdx1 = 0;
			}
			// try {
			// 	uni.removeStorageSync('upOrderType');
			// } catch (e) {}
			// this.page = 0;
			// this.list = [];
			this.getList();
		},
		onReachBottom() {
			this.getList();
		},
		methods: {
			search(){
				if(this.keyword!=''){
					if(this.barIdx1==1){
						this.getMyOrderList();
					}
				}
			},
			searchLineup(v){
				if(v!=''){
					if(this.keywordLineup==''){
						return this.$api.msg('请输入订单号/店铺名/商品名');
					}
				}else{
					this.keywordLineup = v;
				}
				this.page = 0;
				this.list = [];
				this.getLineUporderList();
				this.getLineUpTotal();
				this.$refs.filter_popup.close()
			},
			changeTime(e){
				if(e[0]){
					this.beginlineup = e[0];
					this.endlineup = e[1];
				}else{
					this.beginlineup = '';
					this.endlineup = '';
				}
			},
			changeTypeline(id){
				this.typelineup = id;
			},
			openfilter(){
				this.$refs.filter_popup.open()
			},
			sure(type){
				if(type=='reset'){
					this.beginlineup = '';
					this.endlineup = '';
					// this.typelineup = 0;
				}
				this.page = 0;
				this.list = [];
				this.getLineUporderList();
				this.getLineUpTotal();
				this.$refs.filter_popup.close()
			},
			// 团购订单
			getZorderList() {
				this.page++;
				this.isloading = true;
				this.ismore = true;
				this.$axios('Lists/zorder', "POST", 'order', {
					status: this.typeIdx2,
					page: this.page
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						this.list = [...this.list, ...res.data.data.list];
						this.ismore = res.data.data.list.length > 0;
					}
				})
			},
			// 优惠买单
			getXianxiaList() {
				this.page++;
				this.isloading = true;
				this.ismore = true;
				this.$axios('transLog/trans', 'POST', 'bonus', {
					month: this.timeV,
					page: this.page,
					type: this.typeIdx0
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						this.xianMoney = res.data.data.money;
						this.list = [...this.list, ...res.data.data.list];
						this.ismore = res.data.data.list.length > 0;
					}
				})
			},
			// 商城订单
			getMyOrderList() {
				this.page++;
				this.isloading = true;
				this.ismore = true;
				this.$axios('Lists/display', "POST", 'order', {
					status: this.typeIdx,
					page: this.page,
					keyword: this.keyword
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						this.list = [...this.list, ...res.data.data.list];
						this.ismore = res.data.data.list.length > 0;
					}
				})
			},
			// 礼包订单统计
			getGiftData(){
				this.$axios('Lists/viporder', "POST", 'order').then(res => {
					if (res.data.code == 200) {
						this.giftData = res.data.data.info;
					}
				})
			},
			// 三方订单
			getThreeorderList() {
				this.page++;
				this.isloading = true;
				this.ismore = true;
				let url = '';
				// if(this.typeIdx3==1){
				// 	url = 'order/nosended'
				// }else if(this.typeIdx3==3){
				// 	url = 'order/all'
				// }
				this.$axios('order/all', "POST", 'douyin', {
					type: this.typeIdx3,
					page: this.page
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						this.list = [...this.list, ...res.data.data];
						this.ismore = res.data.data.length > 0;
					}
				})
			},
			// 排队明细
			getLineUporderList(){
				this.page++;
				this.isloading = true;
				this.ismore = true;
				this.$axios('Lists/porder', "POST", 'order', {
					status: this.typeIdx4,
					page: this.page,
					keywords: this.keywordLineup,
					begin: this.beginlineup,
					end: this.endlineup,
					type: this.typelineup
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						this.list = [...this.list, ...res.data.data.list];
						this.ismore = res.data.data.list.length > 0;
					}
				})
			},
			// 排队明细统计
			getLineUpTotal(){
				this.$axios('Lists/feeinfo', "POST", 'order', {
					status: this.typeIdx4,
					keywords: this.keywordLineup,
					begin: this.beginlineup,
					end: this.endlineup,
					type: this.typelineup
				}).then(res => {
					if (res.data.code == 200) {
						this.lineUpTotal = res.data.data.info;
					}
				})
			},
			getList() {
				if (this.barIdx1 === 0) {
					this.getXianxiaList();
				}
				if (this.barIdx1 === 1) {
					this.getMyOrderList();
					this.getGiftData();
				}
				if (this.barIdx1 === 2) {
					this.getZorderList();
				}
				if (this.barIdx1 === 3) {
					this.getThreeorderList();
				}
				if (this.barIdx1 === 4) {
					this.getLineUporderList();
					this.getLineUpTotal();
				}
				this.$axios('Lists/waitOrderTrans','POST','order').then(res=>{
					if(res.data.code == 200){
						this.Wwatenum = Number(res.data.data.watenum);
					}
				})
			},
			openDatetimePicker() {
				this.$refs.myPicker.show();
			},
			// 上一月
			lastMonth(){
				let obj = this.timeV.split('-');
				if(obj[0] == 2023 && obj[1] == 1) return;
				let year = obj[0],
					month = obj[1];
					if(month != 1){
						month = Number(month) - 1;
					}else{
						month = 12;
						year--;
					}
				this.timeV = `${year}-${month}`;
				this.page = 0;
				this.list = [];
				this.getXianxiaList();
			},
			// 下一月
			nextMonth(){
				let obj = this.timeV.split('-');
				let date = new Date(),
					yearOld = date.getFullYear(),
					monthOld = date.getMonth() + 1;
				if(obj[0] == yearOld && monthOld == obj[1]) return;
				let year = obj[0],
					month = obj[1];
					if(month != 12){
						month = Number(month) + 1;
					}else{
						month = 1;
						year++;
					}
				this.timeV = `${year}-${month}`;
				this.page = 0;
				this.list = [];
				this.getXianxiaList();
			},
			handleSubmit(e) {
				this.timeV = `${e.year}-${e.month}`;
				this.timeVstr = `${e.year}年${e.month}月`;
				this.page = 0;
				this.list = [];
				this.getXianxiaList();
			},
			changeType(v, type) {
				this.$refs.filter_popup.close()
				switch (type) {
					case 1:
						if (v === this.typeIdx) return;
						this.typeIdx = v;
						break;
					case 2:
						if (v === this.typeIdx2) return;
						this.typeIdx2 = v;
						break;
					case 3:
						if (v === this.barIdx1) return;
						uni.setStorageSync('upOrderType',v)
						this.keyword = '';
						this.barIdx1 = v;
						break;
					case 4:
						if (v === this.typeIdx3) return;
						this.typeIdx3 = v;
						break;
					case 5:
						if (v === this.typeIdx4) return;
						this.typeIdx4 = v;
						break;
					case 0:
						if (v === this.typeIdx0) return;
						this.typeIdx0 = v;
						break;
				}
				this.page = 0;
				this.list = [];
				this.getList();
				this.$axios('Lists/waitZZTrans','POST','order').then(res=>{
					if(res.data.code == 200){
						this.Zwatenum = Number(res.data.data.watenum);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FBF8FE;
	}
	.wp{
		background: #FBF8FE;
		padding-bottom: 60rpx;
	}
	.round{
		background: #ff233d;
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		position: absolute;
		// right: 24rpx;
		top: 0;
		left: 186rpx;
	}
	.nav_bar {
		position: fixed;
		width: 100%;
		z-index: 100;
		background: linear-gradient( 180deg, #4B05A7 0%, #8615E1 45%, #FBF8FE 100%);
		padding-top: 30rpx;
			.nav_search{
				height: 60rpx;
			}
			.bar1 {
				color: #FFFFFF;
				display: flex;
				align-items: center;
				line-height: 34rpx;
				text-align: center;
				font-size: 24rpx;
				padding-bottom: 30rpx;
				.cate {
					flex: 1;
					position: relative;
				}
				.active {
					color: #fff;
					font-weight: bold;
					font-size: 28rpx;
					margin-top: -4rpx;
					&::after {
						content: '';
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						width: 28rpx;
						height: 6rpx;
						bottom: -12rpx;
						border-radius: 35%;
						background: #fff;
					}
				}
			}

		.bar2 {
			border: none;
			line-height: 75upx;
			font-weight: normal;
			display: flex;
			text-align: center;
			background: #FBF8FE;
			padding: 16rpx 20rpx;
			.cate {
				position: relative;
				padding: 0 36rpx;
				height: 58rpx;
				background: #FFFFFF;
				border-radius: 12rpx;
				line-height: 58rpx;
				color: #333333;
				font-size: 24rpx;
				margin-right: 26rpx;
				white-space: nowrap;
			}
			.active {
				background: linear-gradient( 90deg, #9736E5 0%, #4B05A7 100%);
				color: #FFFFFF;
			}
			.round{
				right: 0;
			}
		}
		.bar3{
			background: #FBF8FE;
			padding: 0 20rpx 10rpx;
			font-size: 24rpx;
			display: flex;
			.line_total{
				margin-right: 10rpx;
			}
		}
		.barDuo{
			justify-content: space-between;
			.cate{
				padding: 0 26rpx;
				margin-right: 0;
			}
		}
		.select_time {
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			font-weight: bold;
			letter-spacing: 1px;
			padding: 0 20upx;
			margin: 0 0 20rpx;
			.time {
				display: flex;
				align-items: center;
			}
			.yticon{
				width: 40rpx;
				height: 40rpx;
				border: 1rpx solid #ffffff8c;
				border-radius: 50%;
				font-size: 24rpx;
				text-align: center;
				line-height: 40rpx;
			}
			.yTr{
				transform: rotateY(180deg);
			}
			.time_num{
				margin: 0 14rpx;
			}
		}

		.serch {
			view {
				background: rgba(231, 231, 231, .7);
				border-radius: 20px;
				color: #666;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32upx;
				height: 70upx;
				margin: 15upx 20upx;

				image {
					height: 40upx;
					margin-right: 20upx;
					width: 40upx;
				}
			}
		}
		.search_con{
			width: 100%;
			margin-top: -30rpx;
			padding: 0 20rpx;
			.uni-searchbar {
				width: 600rpx;
			}
			.uni-searchbar__box{
				justify-content: flex-start;
			}
			.filter{
				width: calc(100% - 600rpx);
				color:#fff;
				text-align: center;
				font-weight: bold;
				font-size: 30rpx;
				image{
					width: 30rpx;
					height: 30rpx;
					margin-left: 6rpx;
				}
			}
		}
	}

	.body {
		padding-top: 170rpx;
	}
	.setTop1{
		padding-top: 244rpx;
	}
	.setTop2{
		padding-top: 288rpx;
	}
	.filter_con{
		padding: 40rpx 20rpx;
		.fil_tit{
			margin: 36rpx 0;
		}
		.fil_it{
			width: 31%;
			line-height: 60rpx;
			border-radius: 80rpx;
			background: #FBF8FE;
			color: #333;
			text-align: center;
			font-size: 24rpx;
		}
		.fil_it_ac{
			background: #8917E2;
			color: #fff;
		}
		.fil_btn{
			width: 48%;
			line-height: 74rpx;
			border-radius: 50rpx;
			text-align: center;
			margin: 60rpx 0;
		}
		.fil_reset{
			background: #F0E1FF;
			color: #333333;
		}
		.fil_sure{
			background: linear-gradient( 90deg, #B92DF1 0%, #8917E2 100%);
			color: #FFFFFF;
		}
	}
</style>